






<template>
	<view class="charging-container">
  
	  
	  <!-- 地图区域 -->
	  <view class="map-container">
		<map 
		  class="map" 
		  :latitude="latitude" 
		  :longitude="longitude" 
		  scale="14"
		  :markers="markers"
		  show-location>
		</map>
		
		<!-- 浮动的充电桩卡片 -->
		<view class="floating-card" style="margin-bottom: 180rpx;">
		  <view class="charging-card">
			<view class="card-title">附近充电桩</view>
			<view class="station-info">
			  <view class="station-details">
				<view class="station-name">科技园充电站</view>
				<view class="station-detail">
				  <text class="distance">距离：1.2km</text>
				  <text class="status">可用：5/8</text>
				</view>
			  </view>
			  <view class="nav-btn">导航</view>
			</view>
		  </view>
		</view>
	  </view>
	  
	  <!-- 引入底部导航栏组件 -->
	  <tab-bar></tab-bar>
	</view>
  </template>
  
  <script>
  import TabBar from '@/components/TabBar.vue'  // 使用相对路径
  
  export default {
	components: {
	  TabBar
	},
	data() {
	  return {
		latitude: 39.909, // 默认纬度
		longitude: 116.39742, // 默认经度
		markers: [] // 地图标记点
	  }
	},
	onLoad() {
	  this.getCurrentLocation();
	  this.updateTime();
	},
	methods: {
	  getCurrentLocation() {
		uni.getLocation({
		  type: 'gcj02', // 使用国测局坐标系
		  success: (res) => {
			console.log('获取位置成功', res);
			this.latitude = res.latitude;
			this.longitude = res.longitude;
			
			// 设置当前位置标记
			this.markers = [{
			  id: 1,
			  latitude: res.latitude,
			  longitude: res.longitude,
			  iconPath: '/static/location.png', // 需要准备一个位置图标
			  width: 30,
			  height: 30
			}, 
			// 添加充电站标记点
			{
			  id: 2,
			  latitude: res.latitude + 0.01, // 示例：稍微偏移一点的位置
			  longitude: res.longitude + 0.01,
			  iconPath: '/static/charger.png', // 需要准备一个充电站图标
			  width: 30,
			  height: 30,
			  callout: {
				content: '科技园充电站',
				color: '#000000',
				fontSize: 12,
				borderRadius: 4,
				padding: 5,
				display: 'ALWAYS'
			  }
			}]
		  },
		  fail: (err) => {
			console.error('获取位置失败', err);
			uni.showToast({
			  title: '获取位置失败，请检查定位权限',
			  icon: 'none'
			});
		  }
		});
	  },
	//   updateTime() {
	// 	const date = new Date();
	// 	const hours = date.getHours().toString().padStart(2, '0');
	// 	const minutes = date.getMinutes().toString().padStart(2, '0');
	// 	const timeString = `${hours}:${minutes}`;
		
	// 	// 更新顶部状态栏时间
	// 	const statusBarEl = document.querySelector('.status-bar text');
	// 	if (statusBarEl) {
	// 	  statusBarEl.textContent = timeString;
	// 	}
	//   }
	}
  }
  </script>
  
  <style lang="scss">
  .charging-container {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	background-color: #f5f7fa;
	
	.status-bar {
	  background-color: #1989fa;
	  padding: 20rpx;
	  color: #fff;
	  text-align: center;
	  z-index: 10;
	}
	
	.map-container {
	  flex: 1;
	  position: relative;
	  
	  .map {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
	  }
	  
	  .floating-card {
		position: absolute;
		left: 30rpx;
		right: 30rpx;
		bottom: 40rpx;
		z-index: 5;
	  }
	}
	
	.charging-card {
	  background-color: #fff;
	  border-radius: 12rpx;
	  padding: 20rpx;
	  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.15);
	  
	  .card-title {
		font-size: 32rpx;
		font-weight: bold;
		margin-bottom: 20rpx;
	  }
	  
	  .station-info {
		display: flex;
		justify-content: space-between;
		align-items: center;
		
		.station-details {
		  flex: 1;
		}
		
		.station-name {
		  font-size: 28rpx;
		  margin-bottom: 10rpx;
		}
		
		.station-detail {
		  font-size: 24rpx;
		  color: #666;
		  
		  .distance {
			margin-right: 20rpx;
		  }
		}
		
		.nav-btn {
		  background-color: #1989fa;
		  color: #fff;
		  padding: 10rpx 30rpx;
		  border-radius: 30rpx;
		  font-size: 26rpx;
		  margin-bottom: 20rpx;
		  margin-right: 20rpx;
		}
	  }
	}
	
	.tab-bar {
	  position: fixed;
	  bottom: 0;
	  left: 0;
	  right: 0;
	  height: 100rpx;
	  background-color: #fff;
	  display: flex;
	  justify-content: space-around;
	  align-items: center;
	  border-top: 1rpx solid #eee;
	  z-index: 10;
	  
	  .tab-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		
		image {
		  width: 40rpx;
		  height: 40rpx;
		  margin-bottom: 6rpx;
		}
		
		text {
		  font-size: 24rpx;
		  color: #666;
		}
	  }
	}
  }
  </style> 